import Vue from 'vue'
import Router from 'vue-router'
// 引入多个模块的规则
import approvalsRouter from './modules/approvals'
import departmentsRouter from './modules/departments'
import employeesRouter from './modules/employees'
import permissionRouter from './modules/permission'
import attendancesRouter from './modules/attendances'
import salarysRouter from './modules/salarys'
import settingRouter from './modules/setting'
import socialRouter from './modules/social'

Vue.use(Router)

/* Layout */
import Layout from '@/layout'
// 这是将规则数组单独拿了出来。
// 动态路由 需要权限才能访问，动态路由不能和静态路由放在一起。
// 所以我们准备一个数组来存放动态路由
// 那么我们为什么要准备一个数组来存放动态路由？
// 因为动态路由需要用户登录后依照用户的权限来进行渲染页面。
// 那么我们将动态路由全都存放在一个数组中，然后等用户登录的时候，依照用户的权限然后对这个数组进行筛选，等到和用户权限相等的路由。

// 动态路由
export const asyncRoutes = [
  // 在这里可以通过调整下面元素的前后顺序来调整页面左侧菜单栏菜单组件的顺序
  departmentsRouter,
  settingRouter,
  employeesRouter,
  permissionRouter,
  approvalsRouter,
  attendancesRouter,
  salarysRouter,
  socialRouter
]

export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true // 开启隐藏，不让菜单栏渲染铺设这些路由
  },
  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        // 为什么下面的二级路由的path没写根路径/？
        // 因为规则默认二级路由path一般不屑根路径/
        // 跳转时路径要从/开始写全
        path: 'dashboard',
        name: 'dashboard',
        component: () => import('@/views/dashboard/index'),
        meta: { title: '首页', icon: 'dashboard' } // 路由原信息，你可以写一些你自己想让路由携带的数据
      }
    ]
  },
  {
    path: '/import',
    component: Layout,
    children: [
      {
        // 为什么下面的二级路由的path没写根路径/？
        // 因为规则默认二级路由path一般不屑根路径/
        // 跳转时路径要从/开始写全
        path: '',
        name: 'uploadExcel',
        component: () => import('@/views/import/index'),
        meta: { title: '上传excel' } // 路由原信息，你可以写一些你自己想让路由携带的数据
      }
    ],
    hidden: true // 开启隐藏，不让菜单栏渲染铺设这些路由
  }

  // 404 page must be placed at the end !!!
  // { path: '*', redirect: '/404', hidden: true }
]

const createRouter = () =>
  new Router({
    // mode: 'history', // require service support
    scrollBehavior: () => ({ y: 0 }),
    // routes 这个属性不是响应式的，所以不能用array.push()来向routes里面插入动态路由
    routes: [
      ...constantRoutes
      // 下面的时动态路由，需要我们根据登录者的权限来赋予不同的动态路由。
      // 那么我们应该在什么地方来获取动态路由呢？
      // 我们要在点击了登录，路由跳转进行时，但还没进入页面时，也就是在路由的前置守卫处，获得动态路由，好了现在去路由的前置守卫处。
      //  ...asyncRoutes
    ]
  })

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  // 下面这行代码：是将动态路由和静态路由临时合并了。
  // 那么是为什么呢？
  // 1.方便开发者开发。全部的组件都能在页面看到这样开发者才好开发呀。
  // 2.权限限制
  router.matcher = newRouter.matcher // reset router
}

export default router
